<template>
    <div id="temp">
      <Top></Top>
  
      <van-checkbox-group v-model="result" :disabled="isEditing">
        <van-checkbox
          @click="changeChecked(item)"
          :name="item.id"
          v-for="(item, index) in cartList"
          :key="index"
        >
          <van-swipe-cell>
            <van-card
              :num="item.number"
              :price="item.retail_price | RMBNumber"
              :title="item.goods_name"
              :thumb="item.list_pic_url"
            />
            <van-stepper
              v-model="item.number"
              v-show="isEditing"
              @change="stepperChange(item)"
            />
            <template #right>
              <van-button
                square
                text="删除"
                type="danger"
                class="delete-button"
                @click="delGoods(item.product_id)"
              />
            </template>
          </van-swipe-cell>
        </van-checkbox>
      </van-checkbox-group>
  
      <van-submit-bar
        :price="cartTotal.checkedGoodsAmount * 100"
        button-text="提交订单"
        @submit="onSubmit"
      >
        <van-checkbox v-model="allcheckedAll" :disabled="isEditing"
          >全选</van-checkbox
        >
        <template #top>
          <span class="word"
            >累计共<span>{{ cartTotal.checkedGoodsCount }}</span
            >件商品，可点击</span
          ><van-button
            :type="isEditing ? 'danger' : 'primary'"
            size="small"
            @click="editBtn"
          >
            {{ isEditing ? "完成编辑" : "编辑" }} </van-button
          ><span class="word">按钮进行商品数量修改</span>
        </template>
      </van-submit-bar>
  
      <!-- 购物车没有数据时 -->
      
  
      <div class="div"></div>
    </div>
  </template>
  
  <script>
  import Top from "@/components/xiangqingtop.vue";
  import {
    GetGWC,
    ChangeGoodsCheckedApi,
    StepperDataApi,
    DelGoodsApi,
  } from "@/request/api";
  export default {
    name: "Project69Cart",
    components: {
      Top,
    },
  
    data() {
      return {
        // result是一个展示选中元素的数组
        // checked为1的,就可以把它的id添加到这个数组中
        result: [],
  
        // //控制全选
        // allcheckedAll: false,
  
        //购物车列表数据
        cartList: [],
        //商品总信息
        cartTotal: [],
  
        isEditing: false,
        data:''
      };
    },
  
    computed: {
      allcheckedAll: {
        get() {
          //当  选中元素的数组result长度 和 购物车列表数据数组cartList长度 相等时为true
          
          return this.result.length == this.cartList.length;
        },
        set(val) {
          let ids_arr = [];
          this.cartList.map((item) => {
            ids_arr.push(item.product_id);
          });
          ChangeGoodsCheckedApi({
            isChecked: val ? 1 : 0,
            productIds: ids_arr.join(), //根据接口标准，逗号隔开，eg：18,26,37...
          }).then((res) => {
            // console.log(res);
            //调用封装的函数
            this.totalFn(res.data);
          });
        },
      },
    },
    created() {
      GetGWC().then((res) => {
        // console.log(res);
        //调用封装的函数
        this.totalFn(res.data);
      });
    },
  
    methods: {
      //封装的函数
      totalFn(data) {
        let { cartList, cartTotal } = data;
        this.cartList = cartList;
        this.cartTotal = cartTotal;
  
        // 清空 this.result 数组,后面的操作不会使数组越来越长
        this.result = [];
  
        //遍历数组
        this.cartList.map((item) => {
          item.checked == 1 ? this.result.push(item.id) : "";
        });
      },
      onSubmit() {},
  
      onClickEditAddress() {},
  
      changeChecked(item) {
        if (this.isEditing) {
          return;
        }
        // 该请求的作用:  告诉后端改变了哪些值
        // 后端返回处理后的完整的页面数据
        ChangeGoodsCheckedApi({
          isChecked: item.checked == 0 ? 1 : 0,
          productIds: item.product_id,
        }).then((res) => {
          // console.log(res);
          //调用封装的函数
          this.totalFn(res.data);
        });
      },
      editBtn() {
        this.isEditing = !this.isEditing;
      },
  
      //步进器
      stepperChange(item) {
        StepperDataApi({
          goodsId: item.goods_id,
          id: item.id,
          number: item.number,
          productId: item.product_id,
        }).then((res) => {
          // console.log(res);
          //调用封装的函数
          this.totalFn(res.data);
        });
      },
      //删除商品
      delGoods(pid) {
        // console.log(pid.toString());
        DelGoodsApi({
          productIds: pid.toString(),
        }).then((res) => {
          //调用封装的函数
          this.totalFn(res.data);
        });
      },
    },
  };
  </script>
  
  <style lang="less" scoped>
  /deep/.van-checkbox__label {
    flex: 1;
  }
  .van-checkbox-group {
    background-color: #fff;
    //   padding-bottom: 1.5rem;
    .van-checkbox {
      padding: 0.1rem 0.15rem;
      border-bottom: 1px solid #ccc;
    }
  }
  .van-submit-bar {
    bottom: 0.5rem;
  
    .van-submit-bar__top {
      .word {
        position: relative;
        top: 0.05rem;
      }
      .van-button {
        margin: 0 0.05rem;
      }
    }
  }
  .van-stepper {
    text-align: right;
  }
  .van-button--square {
    height: 100%;
  }
  
  #temp {
    position: relative;
  }
  .div {
    position: relative;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1.4rem;
  }
  .cartNull {
    width: 75%;
    position: absolute;
    left: 50%;
    top: 85%;
    transform: translate(-50%, -50%);
    text-align: center;
    p {
      margin-top: 0.15rem;
      color: #000;
      font-family: "微软雅黑";
    }
    .p1 {
      font-size: 0.21rem;
    }
    .p2 {
      font-size: 0.15rem;
    }
    .van-icon {
      font-size: 1.1rem;
    }
  }
  </style>